div[data-controller="notifications-product-product-banner"] {
  margin-top: 3rem;
  margin-bottom: 3rem;

  .product_high,
  .product_medium,
  .product_marketing {
    background-color: #{$gray-600};
    margin: 2px 0px;
  }

  .product_high {
    border: 1px solid #{$alert-notification-high};

    .title,
    .preset-icon {
      color: #{$alert-notification-high};
    }

    .modal-body {
      border-color: #{$alert-notification-high};
    }
  }

  .product_medium {
    border: 1px solid #{$alert-notification-medium};

    .title,
    .preset-icon {
      color: #{$alert-notification-medium};
    }

    .modal-body {
      border-color: #{$alert-notification-medium};
    }
  }

  .product_marketing {
    border: 1px solid #{$alert-notification-marketing};

    .title,
    .preset-icon {
      color: #{$alert-notification-marketing};
    }

    .modal-body {
      border-color: #{$alert-notification-marketing};
    }
  }

  .close {
    color: #{$gray-100};
    font-size: 24px;

    &:hover {
      color: #{$gray-200};
    }
  }

  .more-info {
    color: #{$gray-100}
  }
}
